<template>
  <div class="app-container">
    <exception-filter @on-filter="submitFilterForm"/>
    <div style="padding: 10px 0;">
      <el-button-group>
        <el-button v-if="roleCheck('exception-agree')" type="warning"
                   size="mini"
                   @click="checkSelect('agree')">通过
        </el-button>
        <el-button v-if="roleCheck('exception-refuse')" type="danger"
                   size="mini"
                   @click="checkSelect('refuse')">拒绝
        </el-button>
      </el-button-group>
    </div>
    <el-table
      height="550"
      :data="tableData.list"
      @selection-change="handleSelectionChange"
      v-loading="loading"
      element-loading-text="加载中..."
      class="el-table-align-center">
      <el-table-column type="selection" width="55" align="center" :selectable="defaultSelect"></el-table-column>
      <el-table-column label="提现时间" prop="createDate" width="190" align="center">
        <template slot-scope="{row}">
          <div>{{row.createDate | toTime}}</div>
        </template>
      </el-table-column>
      <el-table-column label="提现单号" width="100" prop="orderId" align="center">
        <template slot-scope="{row}">
          <div :class="{'active': row.splitStatus == 1}">{{row.orderId}}</div>
        </template>
      </el-table-column>
      <el-table-column label="拆单关联号" prop="batchNumber" align="center">
      </el-table-column>
      <el-table-column  label="账户类型" prop="userType" width="120" align="center">
        <template slot-scope="{row}">
          {{row.userType | toConverter('ACCOUNT_TYPE')}}
        </template>
      </el-table-column>
      <el-table-column  label="层级" prop="userLevelName" width="120" align="center">
      </el-table-column>
      <el-table-column label="账户名" prop="username" width="120" align="center">
      </el-table-column>
      <el-table-column sortable label="提现金额 " prop="amount" width="120" align="center">
        <template slot-scope="{row}">
          {{row.amount | currency}}
        </template>
      </el-table-column>
      <el-table-column sortable label="手续费 " prop="fee" width="120" align="center">
        <template slot-scope="{row}">
          {{row.fee | currency('', 2, {type: 1})}}
        </template>
      </el-table-column>
      <el-table-column sortable label="出款确认" prop="moneyCheck" width="120" align="center">
         <template slot-scope="{row}">
          {{(row.amount - row.fee) | currency}}
        </template>
      </el-table-column>
      <el-table-column label="用户提现银行" align="center">
        <el-table-column label="银行名称" prop="bankName" width="120" align="center">
        </el-table-column>
        <el-table-column label="卡号" prop="cardNo" width="180" align="center">
          <template slot-scope="{row}">
            <span class="clipboard-btn" :data-clipboard-text="row.cardNo" >{{row.cardNo}}</span>
          </template>
        </el-table-column>
        <el-table-column label="开户行地址" prop="address" width="120" align="center">
        </el-table-column>
      </el-table-column>
      <el-table-column label="玩家姓名" prop="name" width="120" align="center">
        <template slot-scope="{row}">
          <span class="clipboard-btn" :data-clipboard-text="row.name" >{{row.name}}</span>
        </template>
      </el-table-column>
      <!--<el-table-column label="出款商户" prop="merchant" width="120" align="center">-->
      <!--</el-table-column>-->
      <el-table-column label="出款类型" prop="merchant" width="120" align="center">
        <template slot-scope="{row}">
          {{ row.withdrawType | toConverter('OUT_TYPE_PAY')}}
        </template>
      </el-table-column>
      <el-table-column label="操作端" prop="clientType" width="120" align="center">
        <template slot-scope="{row}">
          {{row.clientType | toConverter('PAYMENT_PLATFORM')}}
        </template>
      </el-table-column>
      <el-table-column label="风险类型" prop="riskType" width="120" align="center">
        <template slot-scope="{row}">
          {{toArray(row.riskType) | toConverter('RISK_TYPES') | join}}
        </template>
      </el-table-column>
      <el-table-column label="风险处理人" prop="riskApprover" width="120" align="center">
      </el-table-column>
      <el-table-column label="风险处理时间" prop="lastUpdate " width="180" align="center">
        <template slot-scope="{row}">
          {{row.lastUpdate | toTime}}
        </template>
      </el-table-column>
      <el-table-column label="状态" prop="status" width="120" align="center">
        <template slot-scope="{row}">
          {{row.status | toConverter('WITHDRAW_EXCEPTION_STATUS') || '--'}}
        </template>
      </el-table-column>
      <el-table-column label="备注" prop="remark" width="120" align="center">
      </el-table-column>
    </el-table>
    <div style="font-size:12px;margin-top:30px;color:grey;">
      <span>注1：提现拆过单的提现单号，会以淡蓝底色显示；在注单筛选位置输入注单号并勾选关联拆单搜索，即可筛选出晒单相关联的注单</span><br>
      <span>注2：若是一笔人工出款单拆单后进入了不同的页面（审核等等）则可以在相关联的位置进行注单关联搜索</span><br>
      <span>注3：拆单关联号说明，例子：1-2-1（1-代表单个会员拆单数，2-代表此单一共拆成几个提现单，1-代表拆单中的第几单），拆单关联号号码以天为周期</span>
    </div>
    <div class="pagination-container">
      <el-pagination background @size-change="gridSizeChange" @current-change="gridCurrentChange"
                     :current-page="filters.page" :page-sizes="gridPageSize" :page-size="filters.size"
                     :layout="gridLayout" :total="tableData.total">
      </el-pagination>
    </div>
    <exception-withdraw-dialog
      v-if="dialogName === staticDialogName"
      v-model="dialogVisible"
      :id="dialogProps.id"
      :step="step"
      :ids = "idsArr"
      :menuIds = "menuIds"
      @submit="submitFinished"/>
  </div>
</template>


<script>
import { getWithdrawExceptionList } from '@/services/api/withdraw';
import { grid, constsLabel, dialog } from '@/build';
import ExceptionFilter from '@/views/finance/withdraw/exceptionFilter';
import ExceptionWithdrawDialog from '@/views/finance/withdraw/exceptionWithdrawDialog';

export default {
  name: 'withdraw-exceptions',
  components: { ExceptionWithdrawDialog, ExceptionFilter },
  mixins: [grid, constsLabel, dialog],
  data() {
    const riskType = _.map(consts.RISK_TYPES, 'value');
    return {
      activeClass: 'active',
      tableData: {},
      rowData: {},
      ids: [],
      filters: {
        size: 20,
        page: 1,
        status: -3,
        startTime: moment().format('YYYY-MM-DD 00:00:00'),
        endTime: moment().format('YYYY-MM-DD 23:59:59'),
        riskType: '', // riskType,
        splitStatus: -1,
        userType: undefined,
        dateType: 1,
        // userLevel: [],
      },
      dialogVisible: false,
      staticDialogName: 'exception-withdraw-dialog',
      step: '',
      filterDateType: false,
      dataPermissionObj: {
        1: [['memWithdrawFirstAmountBig-agree', 'memWithdrawFirstAmountBig-reject'], ['agenagenWithdrawFirstAmountBig-agree', 'agenWithdrawFirstAmountBig-reject']],
        2: [['memWithdrawSingleAmountBig-agree', 'memWithdrawSingleAmountBig-reject'], ['agenWithdrawSingleAmountBig-agree', 'agenWithdrawSingleAmountBig-reject']],
        3: [['memWithdrawOneDayAmountBig-agree', 'memWithdrawOneDayAmountBig-reject'], ['agenWithdrawOneDayAmountBig-agree', 'agenWithdrawOneDayAmountBig-reject']],
        4: [['memWithdrawFrequent-agree', 'memWithdrawFrequent-reject'], ['agenWithdrawFrequent-agree', 'agenWithdrawFrequent-reject']],
        5: [['memWithdrawProfitAbnormal-agree', 'memWithdrawProfitAbnormal-reject'], ['agenWithdrawProfitAbnormal-agree', 'agenWithdrawProfitAbnormal-reject']],
        6: [['memWithdrawSevenDayAmountBig-agree', 'memWithdrawSevenDayAmountBig-reject'], ['agenWithdrawSevenDayAmountBig-agree', 'agenWithdrawSevenDayAmountBig-reject']],
        7: [['memWithdrawIpConflict-agree', 'memWithdrawIpConflict-reject'], ['agenWithdrawIpConflict-agree', 'agenWithdrawIpConflict-reject']],
        8: [['memWithdrawDeviceConflict-agree', 'memWithdrawDeviceConflict-reject'], ['agenWithdrawDeviceConflict-agree', 'agenWithdrawDeviceConflict-reject']],
      },
      menuIds: [],
    };
  },
  computed: {
    idsArr() {
      return this.ids.map(item => item.orderId);
    },
  },
  methods: {
    toArray(string) {
      return eval(`(${string})`);
    },
    defaultSelect(row, index) {
      if (row.status === -2 || row.status === 0) {
        return false;
      }
      return true;
    },
    setStep(step) {
      this.step = step;
    },
    // 表格前面的checkbox操作
    handleSelectionChange(val) {
      this.ids = val;
    },
    checkSelect(name) {
      if (this.idsArr.length <= 0) {
        this.$message({ type: 'warning', message: '请先选择提现记录！' });
        return;
      }
      this.menuIds = [];
      _.each(this.ids, (item) => {
        this.menuIds = this.menuIds.concat(name === 'agree' ? item.agreeMenuIds : item.refuseMenuIds);
      });
      this.setStep(name);
      this.openDialog({ dialogName: this.staticDialogName });
    },
  },
  mounted() {
    if (this.dataRoleCheck('memAbnormalWithdraw') || (!this.dataRoleCheck('memAbnormalWithdraw') && !this.dataRoleCheck('agenAbnormalWithdraw'))) {
      this.filters.userType = 0;
    } else if (!this.dataRoleCheck('memAbnormalWithdraw') && this.dataRoleCheck('agenAbnormalWithdraw')) {
      this.filters.userType = 1;
    }
    this.bindGet(getWithdrawExceptionList, 'tableData', {
      action: 'getGrid',
      beforeSend: (data) => {
        if (data.splitType) {
          data.splitType = 1;
        } else {
          data.splitType = undefined;
        }
        // if(data.userLevel.length > 0){
        //   data.userLevel = data.userLevel.join(',')
        // }
        delete data.time;
        return data;
      },
      format: (data) => {
        _.each(data.list, (item) => {
          const num = item.userType === 0 ? 0 : 1;
          item.agreeMenuIds = JSON.parse(item.riskType).map(subItem => dataPermission.DATA_PERMISSION[this.dataPermissionObj[subItem][num][0]]);
          item.refuseMenuIds = JSON.parse(item.riskType).map(subItem => dataPermission.DATA_PERMISSION[this.dataPermissionObj[subItem][num][1]]);
        });
        return data;
      },
      sendingData: 'filters',
    });
    this.getAll();
  },
};
</script>

<style scoped>
  .active{
    color:#F4A460;
  }
</style>
